<template>
  <div class="banner" :class="banner">
     <van-swipe :autoplay="3000" :show-indicators="false">
        <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image" />
        </van-swipe-item>
     </van-swipe>
     <div class="banner_img">
        <img src="https://gw.alicdn.com/imgextra/i3/O1CN01vhbn5j1xgE911BMS3_!!6000000006472-54-tps-65-110.apng" alt="">
     </div>
     <div class="banner_img2">
        <img src="https://gw.alicdn.com/imgextra/i4/O1CN01Flf0il1ygyOsg3fYb_!!6000000006609-2-tps-47-109.png" alt="">
        <div>
            <span>{{day}}</span>
            <span>{{year}}年{{ month }}月</span>
        </div>
     </div>
     <div class="bannerB">
        <img :src="v" alt="" v-for="(v,index) in images" :key="index">
     </div>
  </div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem } from 'vant';
import { Lazyload } from 'vant';

Vue.use(Lazyload);

Vue.use(Swipe);
Vue.use(SwipeItem);
export default {
    data(){
        return{
            images: [
                'https://gw.alicdn.com/imgextra/i1/O1CN01IEfmmh1zDUWnwaUAi_!!6000000006680-2-tps-220-220.png_.webp',
                'https://gw.alicdn.com/imgextra/i4/O1CN01dBDCBD1TH5wKdNkDS_!!6000000002356-2-tps-220-220.png_.webp',
                'https://gw.alicdn.com/imgextra/i2/O1CN011ezTJM1hzQtxfJLLS_!!6000000004348-2-tps-220-220.png_.webp',
                'https://gw.alicdn.com/imgextra/i2/O1CN01ff6NwB22OtEg7W952_!!6000000007111-2-tps-220-220.png_.webp'
            ],
            year:"",
            month:"",
            day:"",
            count:0,
            banner:""
        }
    },
    mounted(){
        let date = new Date()
        let y = date.getFullYear()
        let m = date.getMonth()
        let d = date.getDate()
        this.month = m+1 < 10 ? '0' + (m+1) :(m+1 ) 
        this.day = d< 10 ? '0' + d : d 
        this.year=y

        setInterval(()=>{
                this.count++
                if(this.count>=2){
                    this.count=0
                }
                this.banner=`banner${this.count}`
        },5000)
        
    }
}
</script>

<style scoped>
.banner{
    width: 100%;
    height: 9.7rem;
    background-image: url(https://gw.alicdn.com/imgextra/i3/O1CN01U4RlEt24YcryawRlO_!!6000000007403-0-tps-750-970.jpg_790x10000Q75.jpg);
    background-size: 100% 9.7rem;
    display: flex;
    justify-content: center;
    align-items:center;
    position: relative;
    transition: 1s all linear;
}
.banner0 {
    background-image: url(https://gw.alicdn.com/imgextra/i3/O1CN01U4RlEt24YcryawRlO_!!6000000007403-0-tps-750-970.jpg_790x10000Q75.jpg);
    background-size: 100% 9.7rem;
   
}
.banner1{
    background-image: url(https://gw.alicdn.com/imgextra/i1/O1CN01Y2ofaP1iFSlWyOCYx_!!6000000004383-0-tps-750-970.jpg_790x10000Q75.jpg);
    background-size: 100% 9.7rem;
}
.van-swipe{
    width: 2.98rem;
    height: 2.98rem;
    position: absolute;
    top: 26%;
    left: 30%;
}
.van-swipe img {
    width: 2.98rem;
    height: 2.98rem;

}
.banner_img,.banner_img img{
    width: .64rem;
    height: 1.1rem;
    position: absolute;
    top: .5rem;
    right: .14rem;
}
.banner_img2{
    width: 1.8rem;
    height: 1.14rem;
    display: flex;
    position: absolute;
    top:2rem;
    left: .4rem;
}
.banner_img2 img{
    margin-top: .1rem;
    width: .48rem;
    height: 1.14rem;
}
.banner_img2 div{
    flex: 1;
    display: flex;
    flex-direction: column;}
.banner_img2 div span:nth-child(1){
    width: 1.16rem;
    height: .76rem;
    color: #f8e3c5;
    font-size: 1rem;
    margin-bottom:.2rem;
    display: flex;
    justify-content: center;
}
.banner_img2 div span:nth-child(2) {
    flex: 1;
    font-size: .24rem;
    color: #f8e3c5;
   
}
.bannerB{
    width: 100%;
    height: 2.6rem;
    position: absolute;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.bannerB img{
    width: 1.2rem;
    height: 1.2rem;
    margin: 0 .2rem;
}
</style>